<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统设置-数据量统计分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/layui.css" media="all">
</head>

<body>
    <div class="layui-form">
        <div class="layui-inline" id="ID-laydate-range">
            <div class="layui-input-inline">
                <input type="text" name="start_date" autocomplete="off" id="ID-laydate-start-date" class="layui-input"
                    placeholder="开始日期">
            </div>
            <div class="layui-inline">
                <input type="text" name="end_date" autocomplete="off" id="ID-laydate-end-date" class="layui-input"
                    placeholder="结束日期">
            </div>
        </div>
        <div class="layui-inline">
            <select lay-filter="select-field" name="field">
                <option value="click_rate">按点击率</option>
                <option value="complete_set_rate">按完成设置率</option>
            </select>
        </div>
        <div class="layui-inline">
            <select lay-filter="select-order" name="order">
                <option value="desc">降序排列</option>
                <option value="asc">升序排列</option>
            </select>
        </div>
        <div class="layui-inline">
            <button class="layui-btn js-query" lay-submit lay-filter="submit-query">确认</button>
        </div>
    </div>

    <table class="layui-hide" id="table" lay-filter="table"></table>

    <script>
        String.prototype.format = function (args) {
            var result = this;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] != undefined) {
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                } else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] != undefined) {
                            var reg = new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
        };
        var g_anime_info = {};
        var today = new Date();
        var yesterday = new Date(today.setDate(today.getDate() - 1));
        var sevenDaysAgo = new Date(yesterday.setDate(yesterday.getDate() - 6));
        var formattedYesterday = formatDate(new Date(today));
        var formattedSevenDaysAgo = formatDate(sevenDaysAgo);

        var selectDict = {
            'field_order': 'atime_desc',
            'start_date': formattedSevenDaysAgo,
            'end_date': formattedYesterday,
        };

        function formatDate(date) {
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2);
            var day = ("0" + date.getDate()).slice(-2);
            return year + '-' + month + '-' + day;
        }


        function reLoad() {


            layui.use(['table', 'laydate', 'form', 'layer'], function () {
                var laydate = layui.laydate,
                    layer = layui.layer,
                    table = layui.table,
                    form = layui.form;
                laydate.render({
                    elem: '#ID-laydate-range'
                    , range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
                    , rangeLinked: true
                    , value: [formattedSevenDaysAgo, formattedYesterday]
                    , shade: 0.5
                });

                table.render({
                    elem: '#table'
                    , url: '/god/analysis_user_data/list'
                    , cellMinWidth: 80
                    , cols: [[
                        { type: 'numbers' }
                        , { field: 'oid', title: 'id', width: 250, unresize: true }
                        , { field: 'name', title: '名称' }
                        , {
                            field: 'widget_type', title: '类型', templet: function (d) {
                                return d.widget_type == 0 ? '小号' : d.widget_type == 1 ? '中号' : '大号';
                            }
                        }
                        , {
                            field: 'thumb_url', title: '预览图', templet: function (d) {
                                return '<img onclick="window.open(\'' + d.thumb_url + '\')" style="height: 100%; cursor: pointer" src="' + d.thumb_url + '"/>';
                            }
                        }
                        , {
                            field: 'view_count', title: '展示量', templet: function (d) {
                                return '<pre>' + d.view_count + '</pre>';
                            }
                        }
                        , {
                            field: 'click_count', title: '点击量', templet: function (d) {
                                return '<pre>' + d.click_count + '</pre>';
                            }
                        }
                        , {
                            field: 'complete_set_count', title: '完成设置量', templet: function (d) {
                                return '<pre>' + d.complete_set_count + '</pre>';
                            }
                        }
                        , {
                            field: 'click_rate', title: '点击率', templet: function (d) {
                                return '<pre>' + (d.click_rate * 100).toFixed(2) + '%</pre>';
                            }
                        }
                        , {
                            field: 'complete_set_rate', title: '完成设置率', templet: function (d) {
                                return '<pre>' + (d.complete_set_rate * 100).toFixed(2) + '%</pre>';
                            }
                        }
                    ]]
                    , id: 'tableReload'
                    , page: true
                    , done: function (res) {
                        tableData = {
                            "count": res.count,
                            "data": res.data,
                        }
                        g_anime_info = {};
                        for (var i in res.data) {
                            g_anime_info[res.data[i]._id] = res.data[i];
                        }
                    }
                    , where: selectDict
                    , parseData: function (res) {
                        return {
                            'code': res.code,
                            'msg': res.msg,
                            'count': res.res.count,
                            'data': res.res.list,
                        }
                    }
                });

                layui.use(['form'], function () {
                    var form = layui.form;
                    form.render();
                });
            });
        }

        reLoad();
        var startDate = $('#ID-laydate-start-date').val();
        var endDate = $('#ID-laydate-end-date').val();
        var field = $('select[name="field"]').find(':selected').val();
        var order = $('select[name="order"]').find(':selected').val();

        layui.use(['form'], function () {
            var form = layui.form;
            form.on('select(select-field)', function (data) {
                field = data.value

            });
            form.on('select(select-order)', function (data) {
                order = data.value
            });
            form.on('submit(submit-query)', function (data) {
                $('.js-query').text('‘执行中')
                startDate = data.field['start_date']
                endDate = data.field['end_date']
                selectDict['start_date'] = startDate;
                selectDict['end_date'] = endDate;
                // selectDict['field_order'] = data.field['field'] + '_' + data.field['order'];
                selectDict['field_order'] = field + '_' + order;
                reLoad()
                $('.js-query').text('确定')
                $('#ID-laydate-start-date').val(startDate);
                $('#ID-laydate-end-date').val(endDate);
            });
        })

    </script>

</body>

</html>